<!--
    我的云盘
    梁
    2019年5月6日
    -->
<template lang="pug">
  kalix-master
    div.box
      div.boxLeft
        UserUnit
        Personage
      div.boxRight
        h1 我的云盘
        div.share
          span
            img(src="/static/myCloud/u5999.png")
          span  我的分享
        div.father
          span.upload 上传
          span.new 新建文件夹
          div.internal
            div.progress
              div.progressSon
            span.used 50
            span /120G
          div.searchBox
            input(placeholder="请输入关键字").search
            img(src="static/myCredit/搜索_u4944.png")
        div.center
          template.eltemplate
            el-table(
            ref="multipleTable"
            :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange"
            )
              el-table-column(type="selection" width="55")
              el-table-column(prop="name" width="240")
                template(slot="header")
                  span(ref="mySpan") 已选择0个文件/文件夹
              el-table-column(width="200")
                template(slot-scope="scope")
                  el-button(type="text" size="small")
                    img(src="static/myCloud/u6197.png").elImg
                  el-button(type="text" size="small")
                    img(src="static/myCloud/u6199.png").elImg
                  el-button(type="text" size="small")
                    img(src="static/myCloud/u6201.png").elImg
                  el-button(type="text" size="small"   @click="deleteRow(scope.$index, tableData)")
                    img(src="static/myCloud/u6203.png").elImg
              el-table-column(prop="size" label="大小" width="260")
              el-table-column(label="修改日期" show-overflow-tooltip)
                template(slot-scope="scope") {{ scope.row.date }}
          div.batch(@click="batch") 批量删除
          div.paging
            el-pagination(
            @size-change="handleSizeChange"
            @current-change="current_change"
            :page-size="100"
            layout="prev, pager, next, total, jumper"
            :total="1000")
    div.clearfix
</template>

<script type="text/ecmascript-6">
  export default {
    name: 'MyCloud',
    data() {
      return {
        total: 1000, // 默认数据总数
        pagesize: 10, // 每页的数据条数
        currentPage: 1, // 默认开始页面
        tableData: [
          {
            date: '2016-05-03',
            size: '50M',
            name: '琴师'
          }, {
            date: '2016-05-02',
            size: '50M',
            name: 'Reol'
          }, {
            date: '2016-05-04',
            size: '50M',
            name: 'Aimer'
          }, {
            date: '2016-05-01',
            size: '50M',
            name: 'HITA'
          }, {
            date: '2016-05-08',
            size: '50M',
            name: '刘珂矣'
          }, {
            date: '2016-05-06',
            size: '50M',
            name: '双笙'
          }, {
            date: '2016-05-07',
            size: '50M',
            name: '不才'
          }
        ],
        multipleSelection: []
      }
    },
    methods: {
      batch() {
        console.log('this.multipleSelection', this.multipleSelection)
      },
      deleteRow(index, rows) {
        rows.splice(index, 1)
      },
      handleSelectionChange(val) {
        this.multipleSelection = val
        console.log('val', val)
        this.$nextTick(() => {
          this.$refs.mySpan.innerHTML = '已选择' + val.length + '' + '个文件/文件夹'
        })
      },
      current_change: function (currentPage) {
        this.currentPage = currentPage
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`)
      }
    }
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  .clearfix::after
    content ""
    clear both
    display block
    overflow hidden
    font-size 0
    height 0

  .box
    width 1200px
    margin 5px auto

  h1
    font-size 20px
    color #FF9933

  .boxRight
    width 926px
    height 1471px
    border 1px solid #ccc
    border-radius 5px
    float right
    padding 20px 20px 0 24px
    box-sizing border-box

  .share
    text-align right
    position relative
    img
      position absolute
      top -3px
      right 72px

  .boxLeft
    width 247px
    height 1471px
    float left

  .boxLeftBottom
    width 247px
    height 1140px
    .personage
      display block
      width 247px
      height 60px
      line-height 60px
      text-align center
      border 1px solid #ccc
      background-color #F2F2F2
      cursor pointer
      position relative
      -o-user-select none /*文字禁止被选中*/
      -moz-user-select none /*火狐 firefox*/
      -webkit-user-select none /*webkit浏览器*/
      -ms-user-select none /*IE10+*/
      -khtml-user-select none /*早期的浏览器*/
      user-select none
      .icon
        position absolute
        width 20px
        height 20px
        top 1px
        left 56px
        font-size 22px
        color #333333
    .listBorder
      border none
      border-left 4px solid #FF9933
      background-color #fff
      span
        color #FF9933 !important
    .text
      color #666666
      font-size 18px

  .father
    margin-top 10px
    margin-bottom 24px

  .upload
    display inline-block
    width 70px
    height 30px
    line-height 30px
    background-color #FF9933
    color #fff
    text-align center
    border-radius 5px
    margin-right 10px

  .new
    display inline-block
    width 120px
    height 30px
    line-height 30px
    background-color #FFF
    text-align center
    border-radius 5px
    border 1px solid #FF9933
    margin-right 10px

  .internal
    display inline-block
    width 218px
    .progress
      display inline-block
      width 120px
      height 8px
      border 1px solid #ccc
      border-radius 8px
      position relative
      margin-right 10px
      .progressSon
        width 20%
        height 8px
        border-radius 8px
        background-color #FF9933
        position absolute
        top 0
        left 0
    .used
      color #FF9933

  .searchBox
    display inline-block
    position relative
    margin-left 100px
    .search
      width 350px
      height 30px
      border 2px solid #ccc
      border-radius 5px
      box-sizing border-box
      padding-left 15px
    img
      position absolute
      top 5px
      right 14px

  .center
    position relative

  .paging
    position absolute
    left 50%
    bottom -60px
    margin-left -42%

  .elImg
    width 20px
    height 20px

  .batch
    display inline-block
    color #0099FF
    margin 20px 0 20px 40px
    cursor pointer

</style>
